<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt" %>

<html>
	<head>
		<title>Home</title>
		
		<link rel="stylesheet" type="text/css" href="extjs4/resources/css/ext-all.css" />
    	
    	<script type="text/javascript" src="extjs4/ext-all.js"></script>
    	
    	<script type="text/javascript">
    		Ext.onReady(function() {
    			Ext.define('Movie', {
    			    extend: 'Ext.data.Model',
    			    fields: [ 'original_name', 'overview',  {name: 'poster', mapping: 'posters[0].image.url'} ]
    			});
     			
        		var movieStore = Ext.create('Ext.data.Store', {
        		    model: 'Movie',
        		    autoLoad: true,
        		    proxy: {
        		    	type: 'ajax',
        		    	url: 'home/603.html'
        		    }
        		});
        		
        		var movieGrid = Ext.create('Ext.grid.Panel', {
        		    store: movieStore,
        		    height: 300,
        		    width: 300,
        		    columns: [{
        		            text: 'Title',
        		            sortable: false,
        		            hideable: false,
        		            dataIndex: 'original_name'
        		        }],
       	            forceFit: true,
        		    split: true,
        		    region: 'west'
        		});
        		
				function renderPoster(val) {
					return '<img src="' + val +'">';
				}
        		
        		 Ext.create('Ext.panel.Panel', {
        		    renderTo: 'movie-grid',
       		        frame: true,
       		        title: 'Movie List',
       		        width: 800,
       		        height: 500,
       		        layout: 'border',
       		        items: [
       		            movieGrid, {
       		                id: 'detailPanel',
       		                region: 'center',
       		                bodyPadding: 7,
       		                bodyStyle: "background: #ffffff;",
       		                html: 'Please select a movie to see additional details.'
       		        }]
       		    });
       		 
       		    var movieTplMarkup = ['<img src="{poster}"></br>{overview}'];
       		    var movieTpl = Ext.create('Ext.Template', movieTplMarkup);
       		 
       		    movieGrid.getSelectionModel().on('selectionchange', function(sm, selectedRecord) {
       		        if (selectedRecord.length) {
       		            var detailPanel = Ext.getCmp('detailPanel');
       		            movieTpl.overwrite(detailPanel.body, selectedRecord[0].data);
       		        }
       		    });
    		});
    	</script>
    	
	</head>
	
	<body>
	
		<div id="movie-grid" style="padding: 50"></div>

	</body>

</html>
